<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>区域地址管理页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script type="application/javascript" src="/js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css" tppabs="/layui/css/layui.css" media="all">
</head>
<body>

    <div style="width: 80%;text-align: center;margin-left: 10%">

        <div class="layui-main">
            <!-- 表格上方标题 -->
            <blockquote class="layui-elem-quote">地址列表</blockquote>
            <!-- 添加按钮 -->
            <a class="layui-btn layui-btn-sm" id="insertNewCity">新增区域</a>

            <table id="cityTable" class="layui-table" lay-data="{url: '/getAllCountryByPage', page:true, id:'cityTable'}" lay-filter="cityTable" >
                <thead>
                <tr>
                    <th lay-data="{field: 'id', width: '20%',, align:'center', sort: true, hide:true}">区编号</th>
                    <th lay-data="{field: 'pid', width: '50%', align:'center', hide:true}">所在城市编号</th>
                    <th lay-data="{field: 'pname', width: '35%', align:'center'}">所在城市名称</th>
                    <th lay-data="{field: 'name', width: '35%', align:'center'}">区域名称</th>
                    <th lay-data="{fixed: 'right', width:'30%', align:'center', toolbar: '#barDemo'}">操作</th>
                </tr>
                </thead>
            </table>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="updateCity">修改</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleteCity">删除</a>
            </script>
        </div>
    </div>

    <!-- 新增信息 -->
    <div id="insertCity" style="display: none; padding: 20px">
        <form id="insertCityForm" class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label">选择所在城市</label>
                <div class="layui-input-block">
                    <select id="pname">

                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">新增区域名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" class="layui-input" lay-verify="required" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="insertCitySub">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

    <!-- 修改信息弹出 -->
    <div id="updateCity" style="display: none; padding: 20px">
        <form id="updateCityForm" class="layui-form layui-form-pane" lay-filter="updateCityForm">
            <div class="layui-form-item" style="display: none;">
                <label class="layui-form-label">编号</label>
                <div class="layui-input-block">
                    <input type="text" name="id" class="layui-input" readonly>
                </div>
            </div>
            <div class="layui-form-item" style="display: none;">
                <label class="layui-form-label">城市编号</label>
                <div class="layui-input-block">
                    <input type="text" name="pid" class="layui-input" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">区域名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" class="layui-input" lay-verify="required" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="updateCitySub">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

    <script src="/layui/layui.js" charset="utf-8"></script>

    <script>

        layui.use(['jquery', 'table', 'layer', 'form'], function () {
            // 加载layui模块，使用其推荐的【预先加载】方式，详见官网【模块规范】一节
            var $ = layui.$;
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;

            // 显示添加城市弹出层
            $('#insertNewCity').click(function() {
                // 每次显示前重置表单
                $('#insertCityForm')[0].reset();
                layer.open({
                    type: 1,
                    title: '添加用户信息',
                    skin: 'layui-layer-molv',
                    area: ['400px'],
                    offset: 'auto',
                    content: $('#insertCity')
                });

                $.ajax({
                    url: "/getAllCity",
                    type: "GET",
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function(data) {
                        $("#pname").empty();
                        $("#pname").append('<option>请选择</option>');
                        for (var i in data) {
                            $("#pname").append('<option value="' + data[i].id + '">' + data[i].name + '</option>');
                        }
                    },
                    error: function() {
                        console.log("ajax error");
                    }
                });

            });

            // 新增城市表单提交
            form.on('submit(insertCitySub)', function(data) {

                var pid = $("#pname option:selected").attr("value");
                var pname = $("#pname option:selected").text();
                var cityjson = '{"name":"' + data.field.name + '", "pid":' + pid + ', "pname":"' + pname + '"}';
                // ajax方式新增
                $.ajax({
                    url: "/saveCountry",
                    type: "POST",
                    // data: JSON.stringify(cityjson),
                    data: cityjson,
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (data) {
                        if (data) {
                            layer.close(layer.index);
                            layer.msg('添加成功');
                            table.reload('cityTable');
                        } else {
                            layer.msg('添加失败');
                        }
                    },
                    error: function () {
                        console.log("ajax error");
                    }
                });
                // 阻止表单跳转
                return false;
            });

            //监听行工具栏事件，更新产品
            table.on('tool(cityTable)', function (obj) {
                //获取当前行数据 以及 lay-event的值
                var data = obj.data;
                var event = obj.event;
                //更新用户方法
                if (event == 'updateCity'){
                    // 显示更新表单前自动为表单填写该行的数据
                    form.val('updateCityForm', {
                        "id": data.id,
                        "name": data.name,
                        "pid": data.pid
                    });
                    // 显示更新表单的弹出层
                    layer.open({
                        type: 1,
                        title: '更新用户信息',
                        skin: 'layui-layer-molv',
                        area: ['500px'],
                        content: $('#updateCity')
                    });
                    // 更新表单提交
                    form.on('submit(updateCitySub)', function(data) {
                        // ajax方式更新产品
                        $.ajax({
                            url: "/updateCity",
                            type: "POST",
                            data: JSON.stringify(data.field),
                            contentType: 'application/json',
                            dataType: 'json',
                            success: function(data) {
                                if (data) {
                                    layer.close(layer.index);
                                    layer.msg('更新成功');
                                    table.reload('cityTable');
                                } else {
                                    layer.msg('更新失败');
                                }
                            },
                            error: function() {
                                console.log("ajax error");
                            }
                        });// 阻止表单跳转
                        return false;
                    });
                }

                // 删除事件
                if (event == 'deleteCity') {
                    layer.confirm('确定删除该城市吗？', function(index) {
                        // ajax方式删除
                        $.ajax({
                            url: '/deleteCityById/' + data.id,
                            type: "DELETE",
                            dataType: 'json',
                            success: function(data) {
                                if (data) {
                                    layer.msg('删除成功');
                                    table.reload('cityTable');
                                } else {
                                    layer.msg('删除失败');
                                }
                            },
                            error: function() {
                                console.log("ajax error");
                            }
                        });
                        layer.close(index);
                    });
                }
            });

        });

    </script>

</body>
</html>